import React, {useState, useEffect}from 'react';
import logo from './logo.svg';
import './App.css';
import TodoItem from './TodoItem';

export default function TodoFetchContainer() {
    // //const { userid } = useParams()
    // const [userTodos, setUserTodos] = useState([{
    //     userId: null,
    //     id: null,
    //     title: null,
    //     completed: null
    // }])
    // useEffect(() => {
    //     let url = `https://jsonplaceholder.typicode.com/todos/`
    //     console.log(url)
    //     fetch(url).then(res => {
    //         return res.json()
    //     }).then(data => {setUserTodos(data)})
        
    // }, [])

    // function handleComplete(todo) {
    //     const newList = userTodos.map(t => {
    //         if(t.id === todo.id) {
    //             return {...t, completed:!t.completed};
    //         }
    //         return t;
    //     });
    //     setUserTodos(newList);
    // }


    // return (
    //     <div className="App-header">
    //         <img src={logo} className="App-logo" alt="logo" />
    //         <div style={{marginTop: 20 }}>
    //         <ul style={{textAlign:'left'}}>
    //             {
    //             userTodos.map(todo => (
    //                 <li key={todo.id}>
    //                     <input type="checkbox" checked={todo.completed} onChange={(ev) => {
    //                         handleComplete(todo)
    //                     }} />
    //                     {todo.title}：{todo.completed? '已完成':'未完成'}
    //                 </li>
    //             ))
    //             }
    //         </ul>
    //         </div>
    //     </div>
        
    // );
    const [type, setType] = useState(1);

    return (
            <div className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <TodoItem type={type} />
            </div>
            
        );
}